import React, {PropTypes} from 'react';
import {Container, Tabs, Card, View, NavBar} from 'amazeui-touch';
import {connect} from 'react-redux';
import Action from '../store/actions';
import {bindActionCreators} from 'redux';
import {Link} from 'react-router';
import ModalExample from './ModalExample';

@connect(
    state => ({...state}),
    dispatch => bindActionCreators(Action, dispatch)
)
export default class GoodDetail extends React.Component {
    componentWillMount() {
        this.props.getGoodInfo(this.props.location.query.goodId);
    };

    render() {
        const albums = [
            {
                title: '名称',
                desc: this.props.home.goodInfo.goodInfo.showGoodsMsg[0].name
            },
            {
                title: '详情',
                desc: this.props.home.goodInfo.goodInfo.showGoodsMsg[0].detail
            },
            {
                title: '评论',
                desc: this.props.home.goodInfo.goodInfo.showGoodsMsg[0].detail
            }
        ];
        const imgSrc = "http://10.0.1.24:8080/pic/" + this.props.home.goodInfo.goodInfo.showGoodsMsg[0].image;
        const header = (
            <Card.Child cover={imgSrc}>
                <h3 className="card-title">
                    五折起
                </h3>
            </Card.Child>
        );
        const backNav = {
            component: Link,
            icon: 'left-nav',
            title: '返回',
            to: '/',
            onlyActiveOnIndex: true
        };
        return (
            <View>
                <NavBar
                    amStyle="primary"
                    title="商品详情"
                    leftNav={[backNav]}
                />
                <Container scrollable>
                    <Card header={header}>
                        <h4>价格：{this.props.home.goodInfo.goodInfo.showGoodsMsg[0].price}</h4>
                        <div className="oldPrice">原价：{this.props.home.goodInfo.goodInfo.showGoodsMsg[0].oldPrice}</div>
                    </Card>
                    <div className="detail">
                        <Tabs inset>
                            {albums.map((item, i) => {
                                return (
                                    <Tabs.Item
                                        title={item.title}
                                        key={i}
                                    >
                                        {item.desc}
                                    </Tabs.Item>
                                )
                            })}
                        </Tabs>
                    </div>
                    <div className="purchase">
                        <ModalExample
                            title="立即抢购"
                            modalProps={{role: 'confirm',title: '温馨提醒'}}
                            info={this.props.home.goodInfo.goodInfo}>
                            您确定购买吗？
                        </ModalExample>
                    </div>
                </Container>
            </View>);
    }
}
